<!DOCTYPE html>
<html lang="zh-cn">
<head>
	<meta charset="UTF-8">
	<meta name="author" content="隔壁老王"/>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="ie=edge,chrome=1">
    <meta name="viewport" content="width=1230, initial-scale=1.0, maximum-scale=1, minimum-scale=1, user-scalable=no">
    <meta name="format-detection" content="telephone=no" />
	<title>模版</title>
	<meta name="keywords" content="模版">
	<meta name="description" content="模版">
</head>
<body>

<!---列表--->
<div class="List">
	<div class="container">
		<ul class="ul"></ul>
	</div>
</div>

<style>
@charset "utf-8";/*初始化样式*/
html{ width:100%;min-height:100vh; font-size:14px; background-color:#fff; }
body{ padding:0; width:100%; min-height: 100vh; margin:0 auto; zoom:1;font-size:14px;line-height:1.4em;font-family:"微软雅黑", "Microsoft YaHei", "MS Serif", "MS Sans Serif", "Microsoft Sans Serif";color:#333;/*设置宽度*/ background-color:#fff; margin:0 auto; }
ul,li,form, dl,dt,dd, div{ padding: 0; margin: 0; }
.ul,.ul li{ list-style:none; }
.h1,.h2,.h3,.h4,.h5,.h6,.p{ padding:0; margin:0;}
.em,.i,.b{ font-style:normal; }
/*html5设置*/
article,aside,footer,header,hgroup,nav,section,figure,figcaption{ display: block;}
figure,figcaption{ margin:0; padding:0;}
audio,canvas,progress,video { display: inline-block; vertical-align: baseline;}
video{ object-fit: fill; }
/*百度分享弹框*/
.bd_weixin_popup{ box-sizing: content-box; }
img{ border:none; border:0; vertical-align:top; max-width: 100%; }
span{ outline: none; }
strong{ font-weight: bold; }
a{ color:#333333; text-decoration:none; -webkit-tap-highlight-color:rgba(0,0,0,0); outline: none; }
a:link,a:visited,a:focus{outline:none;text-decoration: none; -moz-outline:none;}
a:hover{ text-decoration:none; color:#04cbd0;}
*,input,textarea,button {-webkit-box-sizing: border-box;-moz-box-sizing: border-box;box-sizing: border-box;}
*:before,
*:after { -webkit-box-sizing: border-box;-moz-box-sizing: border-box;box-sizing: border-box; position: relative;overflow-x: hidden; }
iframe{ display:none; margin:0; padding:; }
/**图片设置加载**/
/*img{ background:url(../images/wait.gif) no-repeat center; }*/
.o-hide{ overflow: hidden; }
.imgBox{ overflow: hidden; }
.imgBox img{ display: block; }
.f_l{ float: left; display: inline-block; }
.f_r{ float: right; display: inline-block; }
.flex{ display:flex; flex-wrap:wrap; }
.i-flex{ display:inline-flex; flex-wrap:wrap; }
.ja-flex{ justify-content:space-around; }
.jb-flex{ justify-content:space-between; }
.jc-flex{ justify-content:center; }
.ac-flex{ align-items:center; }
.as-flex{ align-items:flex-start; }
.hide{ display: none;}
.min_h{ min-height:calc(99vh - 1.06rem); }
/*清楚浮动*/
.clear{ clear:both; height:0; overflow:hidden;}
.clearfix:after{ content: "."; display: block; height: 0; visibility: hidden; clear: both; font-size: 0;}
.clearfix { zoom: 1; }
/**输入框placeholder**/
::-webkit-input-placeholder { /* WebKit, Blink, Edge */ color:#c6c6c6; }
:-moz-placeholder { /* Mozilla Firefox 4 to 18 */ color:#c6c6c6; }
::-moz-placeholder { /* Mozilla Firefox 19+ */ color:#c6c6c6; }
:-ms-input-placeholder { /* Internet Explorer 10-11 */ color:#c6c6c6; }
/*定义滚动条高宽及背景 高宽分别对应横竖滚动条的尺寸*/
iframe::-webkit-scrollbar {  width: 3px; background-color: #dddddd; }
/*定义滚动条轨道 内阴影+圆角*/
iframe::-webkit-scrollbar-track { border-radius: 3px; background-color: #dddddd; }
/*定义滑块 内阴影+圆角*/
iframe::-webkit-scrollbar-thumb { border-radius: 3px; background-color: #4293f4; }
/*滑块效果*/
iframe::-webkit-scrollbar-thumb:hover { border-radius: 3px; background-color: #4293f4; }
/**数字框去掉上下箭头**/
input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button{ -webkit-appearance: none; }
input[type="number"]{ -moz-appearance: textfield; }

/***内容区域***/
.container{ width:100%; margin:0 auto; padding-left:15px; padding-right:15px; }

/**列表**/
.List{}
.List .ul{ text-align:center; }
.List .ul li{ display:inline-block; width:600px; padding:12px; max-width:33.33%; }
.List .ul .div{ display:block; padding-top:120%; position: relative; border:1px solid #1787fb; }
.List .ul .div::before{ content:""; display:block; position: absolute; left:0; top:0; background:rgba(255,255,255,.7); width:100%; height:48px; z-index:2; }
.List .ul .div iframe{ position:absolute; display:block; left:0; top:0; width:100%; height:calc(100% - 42px); background: #fff; transition:all .3s; }
.List .ul .div.on iframe{ position: fixed; left:1%; top:1%; width:98%; height:98%; z-index: 9; }
.List .ul .div.on .tank{ position: fixed; display: block; left:1%; top:1%; margin-top: 10px; margin-left:10px; z-index: 10; }
.List .ul .div a{ position: absolute; display: block; top:10px; color:#fff; border-radius:3px; line-height:28px; font-size:16px; margin-left:0; margin-top:0; padding:0 15px; z-index:3; transition:all .3s; }
.List .ul .div .link{ right:5px; background:#e62129; }
.List .ul .div .tank{ left:5px; background:#1787fb; }
.List .ul .title{ font-size: 14px; line-height:22px; color:#333; text-align:center; padding:10px; margin:0; }


</style>

<script>
var _html = '';
new AjaxGo({
	url:'index.php',
	type:'POST',
	success:function(obj,data){
		data = JSON.parse(data);

		for(k of data.data){
			_html+='<li class="li loading"><div class="div" data-src="http://192.168.1.189:59/'+k.name+'"><a class="link" href="http://192.168.1.189:59/'+k.name+'" target="_blank">新页面打开</a><a class="tank" href="javascript:;">全屏</a><p class="title">'+k.name+'</p></div></li>';

		}
		document.querySelector('.ul').innerHTML = _html;
		go_scroll();
		for(k of document.querySelectorAll('.tank')){
			k.addEventListener('click',function(e){
				let _class = this.parentNode.className;
				if(_class.indexOf('on') > -1){
					this.parentNode.classList.remove('on');
				}else{
					this.parentNode.classList.add('on');
				}
				return false;
			})
		}
	}
});

function go_scroll(){
	let sro_top = document.documentElement.scrollTop || document.body.scrollTop;
	let win_h = window.innerHeight;
	let _tmp;
	for(k of document.querySelectorAll('.loading')){
		if(sro_top+win_h > k.offsetTop){
			k.classList.remove('loading');
			k.querySelector('.title').insertAdjacentHTML('beforeBegin','<iframe src="'+k.querySelector('.div').getAttribute('data-src')+'"></iframe>');
		}
	}
}
window.onscroll = function(){
	go_scroll();
}

function AjaxGo(obj) {
    let _this = this;
    let _opts = _this.opts = {
        url:obj.url||'', // 地址
        type:obj.type||'POST', // 提交方式post get(默认位post)
        async:obj.async||true, // 是否异步(默认位异步)
        form:obj.form||true, // 是否使用form提交(默认位为否)
        data:obj.data||null, // 要提交的数据
		datatype:obj.datatype||'JSON', // 要提交的数据格式是否为json(默认位为否)
		success:obj.success||function(e,data){}, // 请求完成
    }
    let _tmp;
    let _xhr; //创建请求对象对象
    if (window.XMLHttpRequest){// code for IE7+, Firefox, Chrome, Opera, Safari
        _xhr = new XMLHttpRequest();
    }else{// code for IE6, IE5
        _xhr = new ActiveXObject("Microsoft.XMLHTTP");
	}

    //  监控加载
    _xhr.process = function(e){
        console.log('process');
    }
    //  请求失败
    _xhr.onerror = function(e){
    }
    // 请求成功
    _xhr.onload = function(e){
        if(_xhr.status == 200){ //请求成功
        }else if(_xhr.status == 400){ //内部服务器错误
			console.error('内部服务器错误');
        }
        if(_xhr.readyState == 4){
			_opts.success(_this,_xhr.responseText);
        }
    }
    //  状态监控
    _xhr.onreadystatechange = function(e){
        if(_xhr.readyState == 1){ //uninitialized - 还未开始载入
        }else if(_xhr.readyState == 2){ //loading - 载入中
        }else if(_xhr.readyState == 3){ //interactive - 已加载，文档与用户可以开始交互
        }else if(_xhr.readyState == 4){ //complete - 载入完成
        }
    }

    if(_opts.type.toUpperCase() == 'POST'){ // POST
        if(_opts.data){
            _tmp = {};
            if(typeof(_opts.data) == 'string'){
                _opts.data = _opts.data.split('&');
            }
            for(v of _opts.data){
                v = v.split('=');
                _tmp[v[0]] = v[1];
            }
            _opts.data = JSON.stringify(_tmp);
            _tmp = null;
        }
    }

    if(_opts.type.toUpperCase() == 'GET'){
        _tmp = _opts.url.split('?');
        if(_tmp.length > 2){
            _tmp[1] = _tmp[1][_tmp[1].length-1]=='&'?_tmp[1].substr(0,_tmp[1].length-2):_tmp[1];
			_opts.url+= '?'+_tmp[1]
			_opts.url+= _opts.data?'&'+_opts.data:'';
        }else{
			_opts.url+= _opts.data?'?'+_opts.data:'';
        }
        _tmp = _opts.data = null;
    }

    _xhr.open(_opts.type,_opts.url,_opts.async);
    if(_opts.form){
        _xhr.setRequestHeader("Content-Type","application/json");
    }else{
        _xhr.setRequestHeader("Content-Type","application/json");
    }
    _xhr.send(_opts.data);

}
</script>
</body>
</html>